<template>
  <div class="test-devui">
    <h1>Vue DevUI 测试页面</h1>
    
    <d-card>
      <template #header>
        <span>测试卡片</span>
      </template>
      
      <div>
        <d-button type="primary" @click="showMessage">
          主要按钮
        </d-button>
        
        <d-button type="secondary" style="margin-left: 8px;">
          次要按钮
        </d-button>
        
        <br /><br />
        
        <d-input v-model="inputValue" placeholder="请输入内容" />
        
        <p v-if="inputValue">输入的内容: {{ inputValue }}</p>
        
        <br />
        
        <d-progress :percentage="progressValue" :percentage-text="`${progressValue}%`"></d-progress>
        
        <br />
        
        <d-button @click="increaseProgress">增加进度</d-button>
        <d-button @click="resetProgress" style="margin-left: 8px;">重置进度</d-button>
      </div>
    </d-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const inputValue = ref('')
const progressValue = ref(30)

const showMessage = () => {
  alert('DevUI 安装成功！🎉')
}

const increaseProgress = () => {
  if (progressValue.value < 100) {
    progressValue.value += 10
  }
}

const resetProgress = () => {
  progressValue.value = 0
}
</script>

<style scoped>
.test-devui {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}
</style>